import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Link, useLocation } from 'react-router-dom';
import { useAdminAuth } from '../../contexts/AdminAuthContext';
import { useAdminPermissions } from '../../contexts/AdminPermissionContext';

const SidebarWrapper = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #1f2937;
  color: #e5e7eb;
`;

const Logo = styled.div`
  padding: 20px 12px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #374151;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Menu = styled.nav`
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
`;

const MenuItem = styled(Link)`
  display: flex;
  align-items: center;
  padding: 12px 12px;
  color: #e5e7eb;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
  
  &:hover {
    background-color: #374151;
    color: #ffffff;
  }
  
  ${({ active }) => active && `
    background-color: #3b82f6;
    color: #ffffff;
  `};
  
  ${({ collapsed }) => collapsed && `
    padding: 12px 0;
    justify-content: center;
  `};
`;

const MenuText = styled.span`
  margin-left: 12px;
  transition: opacity 0.3s;
  
  ${({ collapsed }) => collapsed && `
    display: none;
  `};
`;

const MenuSection = styled.div`
  margin-bottom: 16px;
`;

const SectionTitle = styled.div`
  padding: 0 12px 8px;
  font-size: 12px;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 500;
  
  ${({ collapsed }) => collapsed && `
    display: none;
  `};
`;

const AdminSidebar = ({ collapsed = false }) => {
  const { currentUser } = useAdminAuth();
  const { hasPermission } = useAdminPermissions();
  const location = useLocation();

  // 定义导航菜单项
  const menuItems = [
    {
      section: '主要功能',
      items: [
        { id: 'dashboard', path: '/admin/dashboard', label: '数据监控大屏' },
        { id: 'users', path: '/admin/users', label: '用户管理' },
        { id: 'finance', path: '/admin/finance', label: '财务管理' },
        { id: 'operation', path: '/admin/operation', label: '运营管理' },
      ]
    },
    {
      section: '内容管理',
      items: [
        { id: 'face', path: '/admin/content/face', label: '面相分析配置' },
        { id: 'palm', path: '/admin/content/palm', label: '手相分析配置' },
        { id: 'bazi', path: '/admin/content/bazi-database', label: '八字命理库' },
        { id: 'tarot', path: '/admin/content/tarot-management', label: '塔罗牌面管理' },
        { id: 'dream', path: '/admin/content/dream-keyword', label: '解梦关键词' },
      ]
    },
    {
      section: '系统管理',
      items: [
        { id: 'versions', path: '/admin/app-versions', label: 'APP版本管理' },
        { id: 'settings', path: '/admin/settings', label: '系统设置' },
      ]
    }
  ];

  // 判断当前项是否处于激活状态
  const isActive = (path) => {
    return location.pathname.startsWith(path);
  };

  // 获取图标组件（简单的文本图标，实际项目中可以使用SVG图标或图标库）
  const getIcon = (id) => {
    const icons = {
      dashboard: '📊',
      users: '👥',
      finance: '💰',
      operation: '📣',
      face: '👤',
      palm: '✋',
      bazi: '📅',
      tarot: '🃏',
      dream: '😴',
      versions: '📱',
      settings: '⚙️'
    };
    return icons[id] || '📁';
  };

  // 暂时禁用权限过滤，确保所有菜单项都显示
  // 后续可以根据实际权限需求重新启用过滤
  const filteredMenuItems = menuItems;

  return (
    <SidebarWrapper>
      <Logo>
        {collapsed ? '灵犀' : '灵犀指引 - 管理后台'}
      </Logo>
      
      <Menu>
        {filteredMenuItems.map((section, sectionIndex) => (
          <MenuSection key={sectionIndex}>
            <SectionTitle collapsed={collapsed}>
              {section.section}
            </SectionTitle>
            {section.items.map(item => (
              <MenuItem
                key={item.id}
                to={item.path}
                active={isActive(item.path)}
                collapsed={collapsed}
              >
                <span>{getIcon(item.id)}</span>
                <MenuText collapsed={collapsed}>
                  {item.label}
                </MenuText>
              </MenuItem>
            ))}
          </MenuSection>
        ))}
      </Menu>
    </SidebarWrapper>
  );
};

export default AdminSidebar;